<!-- 比一比 -->
<template>
  <div class="container">
    <div class="top_title">单项练习磨刀枪，综合演练上战场，擂台竞技比高下，鏖战数学练兵网！</div>
    <div class="TuBiao">
      <div class="head_title">
        <div class="head_right">
          <div class="accuracy">
            正确率
            <div class="accuracy_num">{{accuracy}}</div>%
          </div>
          <div class="speed accuracy">
            平均每分钟答对
            <div class="accuracy_num">{{speedNum}}</div>题
          </div>
        </div>
        <div class="head title">比一比</div>
        <div class="head_right">
          <div class="head_date">
            用时{{minute}}:
            <span v-show="second < 10">0</span>
            {{second}}
          </div>
          <div class="correct">
            √
            <div class="num">{{sum}}</div>
          </div>
          <div class="correct">
            ×
            <div class="num">{{err}}</div>
          </div>
        </div>
      </div>
      <div class="practice" v-for="(item,index) in questions" :key="item.id">
        <span>{{item.leftNum}}</span>
        <input v-focus="focusIndex === index"
            @keyup.enter="nextFocus(index)"
          v-model="value[index]"
          style="margin:3px 0px 0px 0px;width:29px;height:25px;line-height:19px;color:#ee00ee;"
          type="text"
          maxlength="2"
        />
        <span>{{item.rightNum}}</span>
        <div class="result" v-if="item.judge == null"></div>
        <div class="result" v-if="item.judge == 1">√</div>
        <div class="result" v-if="item.judge == 0">{{item.answer}}</div>
      </div>
      <div class="foot">
        <el-button type="warning" round @click="getRandomData">换题</el-button>
        <el-button type="primary" round @click="sub">提交</el-button>
        <el-button type="warning" round @click="goBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {newHistory} from '@/api/history'
import Vue from "vue";
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, obj) {
    //这是需要页面刚加载就能进行聚焦操作使用的钩子函数,可以省略的，视具体需求而定
    //console.log(obj);
    if (obj.value) {
      //对值进行判断
      // 聚焦元素
      el.focus();
    }
  },
  // 当指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function(el, obj) {
    //这是每当绑定的值发生改变时触发的钩子函数
    //console.log(obj);  //可以打印看一下
    if (obj.value) {
      el.focus();
    }
  }
});
export default {
  computed: {
    accuracy() {
      if (this.sum) {
        let accuracy = 0;
        accuracy = (this.sum / this.questions.length) * 100;
        return accuracy.toFixed();
      } else {
        return 0;
      }
    }
  },
  data() {
    return {
      questionList: [{}],
      focusIndex: 0, //用来存放下一个应该聚焦的index值
      value: [],
      questions: [],
      minute: 0,
      second: 0,
      sum: null,
      err: null,
      timer: null,
      speedNum: " "
    };
  },
  created() {
    this.getTime();
    this.getRandomData();
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        this.second++;
        if (this.second == 60) {
          this.minute++;
          this.second = 0;
        }
      }, 1000);
    },
    sub() {
      console.log("已经进入提交事件");
      this.sum = 0;
      this.err = 0;

      this.questions.forEach((item, index) => {
        if (item.leftNum > item.rightNum) {
          item.answer = ">";
        } else if (item.leftNum < item.rightNum) {
          item.answer = "<";
        } else {
          item.answer = "=";
        }
        
        if (item.answer == this.value[index]) {
          this.sum++;
          item.judge = 1;
        } else {
          this.err++;
          item.judge = 0;
        }
      });
      this.clearTimer();
      this.speed();

    },
    getAnswer(){
       let data = {
        createBy: "jy",
        grade: 5,
        field2: 1,
        name: "3位数以内加",
        score: 0
      };
      newHistory(data)
      if(!this.isSubmit){
        this.sumbitAnswer();
      }else{
        this.value=[];
      }
    },
    clearTimer() {
      clearInterval(this.timer);
    },
    speed() {
      let minute = this.minute;
      if (minute == 0) {
        minute = 1;
      }
      this.speedNum = this.sum / minute;
      return this.speedNum.toFixed(1);
    },
    goBack() {
      this.$router.go(-1);
    },
    getRandom(start, end, fixed = 0) {
      let differ = end - start;
      let random = Math.random();
      return (start + differ * random).toFixed(fixed);
    },
   
    getRandomData() {
      this.questions.length = 0;
      for (let i = 0; i < 12; i++) {
        let leftNum, rightNum, icon;
        leftNum = this.getRandom(10, 9999);
        rightNum = this.getRandom(10, 9999);
        leftNum = parseInt(leftNum)
        rightNum = parseInt(rightNum)
        let question = {
          rightNum: rightNum,
          leftNum: leftNum,
          answer: null
        };
        // console.log(question);
        this.value=[]
        this.focusIndex=0
        this.questions.push(question);
      }
    },
    nextFocus(index) {
      if (this.focusIndex == this.questions.length - 1) {
        console.log("下一个input框");
        this.sub();
      }
      return (this.focusIndex = index + 1);
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  padding: 1px;
  background-color: #ffffff;
  .top_title {
    background-color: #68a1ce;
    height: 180px;
    font-size: 50px;
    text-align: center;
    padding-top: 55px;
  }
}

.TuBiao {
  border: 1px solid #dbf2ff;
  background: #f1faff;
  border-radius: 10px;
  width: 1003px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 37px;

  .head_title {
    overflow: hidden;
    background-color: orange;
    color: #fff;
    .head {
      float: left;
      width: 32.55%;
      text-align: center;
      height: 70px;
      padding: 20px 0;
    }
    .title {
      font-size: 30px;
      font-weight: bold;
    }
    .head_right {
      display: inline-block;
      width: 32.55%;
      padding: 15px 0;
      text-align: center;
      .accuracy {
        margin-bottom: 10px;
        .accuracy_num {
          display: inline-block;
          height: 22px;
          width: 20px;
        }
      }
      .head_date {
        margin-bottom: 10px;
      }
      .correct {
        display: inline-block;
        .num {
          display: inline-block;
          width: 25px;
          height: 22px;
        }
      }
    }
  }
  .practice {
    display: inline-block;
    width: 33.3333%;
    text-align: center;
    margin: 30px 0;
    .result {
      display: inline-block;
      width: 45px;
      height: 22px;
    }
  }
  .foot {
    text-align: center;
    height: 60px;
    line-height: 60px;
    background-color: orange;
  }
}
</style>
